<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>流程图</title>
    <style>
#app{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%}
#header{flex:0 0 auto;-webkit-flex:0 0 auto;line-height:1.3}
#panes{display:flex;display:-webkit-flex;flex:1 1 auto;-webkit-flex:1 1 auto}
#graph{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}
#options{flex:0 0 auto;-webkit-flex:0 0 auto}
#output{flex:1 1 auto;-webkit-flex:1 1 auto;position:relative;overflow:auto}
#editor{border-right:1px solid #ccc}
#header{background:#eee;border-bottom:1px solid #ccc;padding:5px;text-align:center}
#header b{font-size:18px}
#options{background:#eee;border-bottom:1px solid #ccc;padding:8px}
#options label{margin-right:8px}
#options #raw.disabled{opacity:.5}
#output svg{position:absolute;top:0;left:0;width:100%;height:100%}
#output #text{font-size:12px;font-family:monaco,courier,monospace;white-space:pre;position:absolute;top:0;left:0;width:100%;height:100%;overflow:auto}
#output img{display:block;margin:0 auto}
#output.working svg,#output.error svg,#output.working #text,#output.error #text,#output.working img,#output.error img{opacity:.4}
#output.error #error{display:inherit}
#output #error{display:none;position:absolute;top:20px;left:20px;margin-right:20px;background:red;color:white;z-index:1}
.gutter{background-color:#eee;background-repeat:no-repeat;background-position:50%}
.gutter.gutter-horizontal{background-image:url('');cursor:ew-resize}
.split{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}
.split.split-horizontal,.gutter.gutter-horizontal{height:100%;float:left}
textarea{width:98%; height:8em;}
.exclude_input{width: calc( 50% - 350px); min-width: 150px;}
.hide{display:none}
.btn.translate{background-color:#CCF;border-width: 1px;}
    </style>
</head>
<body>

<div id="app">
    <div id="header">
        <button class="btn btn-success btn-xs translate depend">转换</button>
        <button class="btn btn-success btn-xs goback">后退</button>
        <label id="exclude_label">排除正则:<input id="exclude" name="exclude" class="exclude_input"/></label>
        <label id="show_source"><input type="checkbox" name="show_source">显示源码</label>

        <label id="engine">
            渲染引擎:
            <select>
                <option>circo</option>
                <option selected>dot</option>
                <option>fdp</option>
                <option>neato</option>
                <option>osage</option>
                <option>twopi</option>
            </select>
        </label>

        <label id="rankdir"><input type="checkbox" name="rankdir" >横竖切换</label>

        <label id="format">
            格式:
            <select>
                <option selected>svg</option>
                <option value="png-image-element">png</option>
                <option>json</option>
                <option>xdot</option>
                <option>plain</option>
                <option>ps</option>
            </select>
        </label>

        <label id="raw"><input type="checkbox">xml </label>
        <label id="show_tree"><input type="checkbox" name="show_tree" value="tree">分级 <span id="union_prompt" style="color:red"></span></label>
        <label id="show_where"><input type="checkbox" name="show_where" value="tree" checked="checked">显示 where </label>
        <label id="show_index_info"><input type="checkbox" name="show_index_info" value="tree">显示表索引 </label>
        <label id="replace_sql_type">修复sql <option name="replace_sql_type"><option value="" selected>不修复</option><option value="补全">补全</option><option value="近似">近似</option></select></label>
        <button class="btn btn-success btn-xs charge_body">显示/隐藏sql</button>

<textarea id="sql" name="sql">
select n_name, sum(l_extendedprice * (1 - l_discount)) as revenue from CUSTOMER c, ORDERS o, LINEITEM l, SUPPLIER s, NATION n, REGION r where c.c_custkey = o.o_custkey and l.l_orderkey = o.o_orderkey and l.l_suppkey = s.s_suppkey and c.c_nationkey = s.s_nationkey and s.s_nationkey = n.n_nationkey and n.n_regionkey = r.r_regionkey and r_name = 'MIDDLE EAST' and o_orderdate >= date '1994-01-01' and o_orderdate < date '1994-01-01' group by n_name order by revenue desc;
</textarea>
    </div>
    
    <div id="panes" class="split split-horizontal">
        <div id="editor" class="split"># 语法教程 https://www.jianshu.com/p/e44885a777f0
digraph G {
            graph[shape="box" fontsize=10 rankdir=LR]
            node[shape="box"  fontsize=10 color="black" bgcolor="red" distortion=.7]
            edge[fontsize=10 fontcolor="black" color="#FF9999" style="filled" dir=none]

            // VIZ TEMPLATE
}
        </div>
        <div id="editor_template" style="display:none;"># 语法教程 https://www.jianshu.com/p/e44885a777f0
digraph G {
    graph[shape="box" fontsize=10 rankdir=LR]
    node[shape="box"  fontsize=10 color="black" bgcolor="red" distortion=.7]
    edge[fontsize=10 fontcolor="black" color="#FF9999" style="filled" dir=none]

// VIZ TEMPLATE
}
        </div>
        <div id="graph" class="split">
            <div id="output">
                <div id="error"></div>
            </div>
        </div>
    </div>
</div>

<script src="./bower_components/ace.js"></script>
<script src="./bower_components/viz.js"></script>
<script src="./bower_components/fabric.min.js"></script>
<script src="./bower_components/split.min.js"></script>
<script src="./bower_components/svg-pan-zoom.min.js"></script>
<script type="text/javascript" src="../gzip/pako.min.js"></script>
<script type="text/javascript" src="../gzip/base64_gzip.js"></script>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../../sybn_common.js"></script>
<script type="text/javascript" src="./viz_template.js"></script>

<script>
var backList = [];
window.onload = function() {
    updateGraph();
  
    var exclude = getQueryString("exclude");
    if (exclude) {
        $('[name=exclude]').val(exclude);
    }
  
    var zip = getQueryString("zip");
    if (zip) {
        sql=unzip(zip);
        $('[name=sql]').val(sql);
        backList.push($('#sql').val());
        translate();
    }
  
    $('.CodeMirror').addClass("form-control");
    // 查询
    $('body').on('click', 'button.translate', function(e){
      if(backList[backList.length-1] != $('#sql').val()) {
          backList.push($('#sql').val());
      }
      translate(e, this);
    });
    // 横纵转换
    $('body').on('click', '[name=rankdir]', ()=>{
      var s = editor.getValue();
      if ($('[name=rankdir]').is(":checked")){
          s = s.replace("rankdir=LR", "rankdir=TB");
      } else {
          s = s.replace("rankdir=TB", "rankdir=LR");
      }
      editor.setValue(s);
    });
    // 显示/隐藏源码
    $('body').on('click', '[name=show_source]', ()=>{
       toggleSource();
    });
    toggleSource();
  
    // 返回
    $('body').on('click', 'button.goback', function(){
        if (backList.length > 1 && backList[backList.length-2]) {
            var v = backList[backList.length-2];
            backList.pop();
                $('[name=sql]').val(v);
                translate();
        }
        return false;
    });
    // 实现双击跳转效果
    $('body').on('dblclick', 'g.node', function(x){
      // copyText(x.currentTarget);
      var title = $(x.currentTarget).find("title");
      if (title && title.length==1) {
          var table = title.text().replace("__", ".");
          if (backList[backList.length-1] != table) {
              $('#sql').val(table);
              $("button.all").click();
          }
      }
      return false;
    });
  
    // union 提示
    $('#sql').on('change', function(x){
      var sql = $('[name=sql]').val();
      if (sql && sql.toLowerCase().indexOf("union") > 0) {
          $('#union_prompt').text('有 union')
      } else {
          $('#union_prompt').text('')
      }
    });
    
    
    // 调整sql
    $('body').on('click', '.charge_body', ()=>{
        if ($('#sql').hasClass('hide')) {
            $('#sql').removeClass('hide');
        } else {
            $('#sql').addClass('hide');
        }
      updateGraph();
    });
};

// 显示/隐藏 源码窗口
function toggleSource() {
    if ($('[name=show_source]').is(":checked")){
        $('#editor').show();
        $('.gutter-horizontal').show();
        var $g = $('#graph');
        $g.attr('style', $g.attr('style2'));
    } else {
        $('#editor').hide();
        $('.gutter-horizontal').hide();
        var $g = $('#graph');
        $g.attr('style2', $g.attr('style'));
        $g.attr('style', 'width:100%');
    }
    updateGraph();
}

// 查询数据
function translate(e, _this) {
    var sql = $('[name=sql]').val();
    var exclude = $('[name=exclude]').val();
    if (!sql) {
        return;
    }
    $this = $(_this) || $(this);
    var table_catalog = getQueryString("table_catalog");
    var db_source = getQueryString("db_source");

    var url2 = changeURLPar(window.location.href.toString(), "zip", zip(sql));
    window.history.pushState({},0,url2);

    // 防止双击触发单击
    $.ajax({
        url: "../../../api/viz/translate_join.json",
        type: 'post', dataType: 'json', async: true, cache: false,
        data: {sql:sql, exclude: exclude, db_source: db_source, table_catalog: table_catalog,
           show_tree: $('[name=show_tree]').is(':checked'),
           show_index_info: $('[name=show_index_info]').is(':checked'),
           show_where: $('[name=show_where]').is(':checked'),
           replace_sql_type: $('[name=replace_sql_type]').val()
        },
        success:function(data) {
            if (data.status && data.status >= 400){
                alert(data.message ? "操作失败: " + data.message : "操作失败!");
            } else if (!data.result){
                alert(data.msg ? "操作失败: " + data.msg : "操作失败!");
            } else {
                var s = $("#editor_template").text();
                if ($('[name=rankdir]').is(":checked")){
                    s = s.replace("rankdir=LR", "");
                }
                s = s.replace("// VIZ TEMPLATE", data.output);
                editor.setValue(s);
            }
        },
        error:function(data) {
            alert("操作失败");
        }
    });
}

</script>
</body>
</html>
